﻿@using ImpressionPrint.Utility
@using ImpressionPrint.Model

@{
    ViewBag.Title = "木知春冲印";
    Layout = "~/Views/Home/TemplateLayout.cshtml";
}@section head_js
{
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>

    <script src="~/Scripts/moxie.js" type="text/javascript"></script>
    <script src="~/Scripts/plupload.dev.js" type="text/javascript"></script>
    <script src="~/Scripts/qiniu.js"></script>


    <script>
        var wxFlag = isweixin();
        var localids = [];
        var objOrderDetails;
        var uploadnum;
        objOrderDetails=@Html.Raw(ViewBag.order);
        //var width = getWidth();
        if (wxFlag) {
            
            wx.config(@Html.Raw(ViewBag.config));
            wx.ready(function () {
                var width = document.body.clientWidth / 4;
                var btnHtml=" <div class=\"weui_uploader_input_wrp\"><a class=\"weui_uploader_input\" id=\"chooseImage\" name=\"chooseImage\"></a></div>";
                $("#weui_uploader_bd").append(btnHtml);
                //alert(width);
                // 5 图片接口
                // 5.1 拍照、本地选图

                var images = {
                    localId: [],
                    serverId: []
                };

                //objOrderDetails=@Html.Raw(ViewBag.order);
                uploadnum=objOrderDetails.uploadnum;//已上传数量
                ///图片数量
                var picNum = 0;
                var html = "";

                document.querySelector('#chooseImage').onclick = function () {
                    var oid = getUrlParam("oid");
                    var mobile = getUrlParam("m");
                    wx.chooseImage({
                        count: 9,
                        success: function (res) {
                            //alert("选择文件成功");
                            //检查选择照片数量是否符合要求
                            //var uploadnum = 0;
                            var tempnum=uploadnum+ res.localIds.length;
                            if(tempnum>objOrderDetails.num)
                            {
                                $('#dialog2').show().on('click', '.weui_btn_dialog', function () {
                                    $('#dialog2').off('click').hide();
                                });
                            }
                            else
                            {
                                uploadnum=tempnum;
                                $("#picIndex").html(uploadnum+"/"+objOrderDetails.num);
                                //html = "";
                                localids.push(res.localIds);
                                //上传图片到微信服务器
                                UploadImg(mobile, oid, res.localIds);
                            }
                        }
                    });
                };

                var UploadImg = function (mobile, oid, localIds) {
                    var localId = localIds.pop();
                    wx.uploadImage({
                        localId: localId,
                        isShowProgressTips: 1,
                        success: function (res) {
                            //alert("上传微信文件成功");
                            var serverId = res.serverId; // 返回图片的服务器端ID
                            //alert(serverId);
                            //调用服务器方法传图到七牛空间
                            UploadImgToQiniu(mobile, oid, serverId);
                            //其他对serverId做处理的代码
                            if (localIds.length > 0) {
                                UploadImg(mobile, oid, localIds);
                            }
                            else {
                                //alert("图片已上传完毕");
                            }
                        }
                    });
                };

                var UploadImgToQiniu = function (mobile, oid, serverId) {
                    //alert("开始上传七牛");
                    $.ajax({
                        type: "get",
                        url: "./UploadImgToQiniu?m=" + mobile + "&oid=" + oid + "&s=" + serverId + "&w=" + width,
                        //async : false,
                        datatype: "json",
                        success: function (data) {
                            //alert(data);
                            var objResult = $.parseJSON(data);
                            if (objResult.success) {
                                var html = "<li class='weui_uploader_file' id='" + serverId + "' style='height:" + width + "px'><img style='width:100%;height:100%;' src='" + objResult.url + "' onclick=\"PreviewImg('" + mobile + "','" + oid + "','" + serverId + "')\" /></li>";
                                $("#photoDiv").append(html);
                            }
                        },
                        error: function (error) {
                            JSON.stringify(error)
                            /*弹出jqXHR对象的信息*/
                            alert("responseText"+jqXHR.responseText+"status:"+jqXHR.status+"readyState:"+jqXHR.readyState+"statusText:"+jqXHR.statusText+"textStatus:"+textStatus+"errorThrown:"+errorThrown);
                            //alert(jqXHR.status);
                            //alert(jqXHR.readyState);
                            //alert(jqXHR.statusText);

                            //alert(textStatus);
                            //alert(errorThrown);
                        }
                    });
                }

            });
            wx.error(function (res) {
                alert("接口验证失败，详细信息：\n" + JSON.stringify(res));
            });
        }
        else {
            
            $(function() {
                var btnHtml=" <div ><a  id=\"chooseImage\" name=\"chooseImage\"><i></i><span>选择文件</span></a></a></div>";
                $("#weui_uploader_bd").append(btnHtml);
                var width = document.body.clientWidth / 4;
                uploadnum=objOrderDetails.uploadnum;//已上传数量
                //引入Plupload 、qiniu.js后
                var uploader = Qiniu.uploader({
                    runtimes: 'html5,flash,html4',    //上传模式,依次退化
                    browse_button: 'chooseImage',       //上传选择的点选按钮，**必需**
                    uptoken_url: './GetQiniuUpToken',            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
                    // uptoken : '<Your upload token>', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
                    unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
                    // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
                    domain: '7xj84r.com2.z0.glb.qiniucdn.com/',   //bucket 域名，下载资源时用到，**必需**
                    get_new_uptoken: false,  //设置上传文件的时候是否每次都重新获取新的token
                    //container: 'weui_uploader_bd',           //上传区域DOM ID，默认是browser_button的父元素，
                    max_file_size: '100mb',           //最大文件体积限制
                    flash_swf_url: '../Scripts/Moxie.swf',  //引入flash,相对路径
                    max_retries: 3,                   //上传失败最大重试次数
                    //dragdrop: true,                   //开启可拖曳上传
                    //drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
                    chunk_size: '30mb',                //分块上传时，每片的体积
                    multi_selection: true,//!(mOxie.Env.OS.toLowerCase()==="ios"),
                    auto_start: false,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
                    init: {
                        'FilesAdded': function(up, files) {
                            //alert("已上传数量"+uploadnum+"本次上传数量"+files.length);
                            //检查选择照片数量是否符合要求
                            var uploadnum = 0;
                            var tempnum=uploadnum+ files.length;
                            if(tempnum>objOrderDetails.num)
                            {
                                uploader.splice(0,files.length);
                                $('#dialog2').show().on('click', '.weui_btn_dialog', function () {
                                    $('#dialog2').off('click').hide();
                                    //return;
                                });
                            }
                            else
                            {
                                uploader.start();
                            }
                            //plupload.splice(
                            //plupload.each(files, function(file) {
                            //    // 文件添加进队列后,处理相关的事情
                            //});
                        },
                        //'FilesRemoved':function(up,file){
                        //    alert(JSON.stringify(file));
                        //},
                        'BeforeUpload': function(up, file) {
                            //$('#loadingToast').show();
                            // 每个文件上传前,处理相关的事情
                        },
                        'UploadProgress': function(up, file) {
                            $('#loadingToast').show();
                            // 每个文件上传时,处理相关的事情
                        },
                        'FileUploaded': function(up, file, info) {
                            var oid = getUrlParam("oid");
                            var mobile = getUrlParam("m");
                            //alert("文件上传成功"+"up:"+JSON.stringify(up)+";file:"+JSON.stringify(file)+";info:"+info);
                            var fileinfo=JSON.parse(info);
                         
                            var url="http://" + up.settings.domain+"/"+fileinfo.key;
                            
                            $.ajax({
                                type: "get",
                                url: "./UploadImgToQiniu?m=" + mobile + "&oid=" + oid + "&s=" + fileinfo.key  + "&w=" + width+"&u="+url+"&f="+wxFlag,
                                async : false,
                                datatype: "json",
                                success: function (data) {

                                    //alert(data);
                                    var objResult = $.parseJSON(data);
                                    if (objResult.success) {
                                        $('#loadingToast').hide();
                                        uploadnum=uploadnum+1;
                                        var html = "<li class='weui_uploader_file' id='" + fileinfo.key  + "' style='height:" + width + "px'><img style='width:100%;height:100%;' src='" + objResult.url + "' onclick=\"PreviewImg('" + mobile + "','" + oid + "','" + fileinfo.key  + "')\" /></li>";
                                        $("#photoDiv").append(html);
                                    }
                                }
                            });
                            // 每个文件上传成功后,处理相关的事情
                            // 其中 info 是文件上传成功后，服务端返回的json，形式如
                            // {
                            //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                            //    "key": "gogopher.jpg"
                            //  }
                            // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

                            // var domain = up.getOption('domain');
                            // var res = parseJSON(info);
                            // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
                        },
                        'Error': function(up, err, errTip) {
                            $('#loadingToast').hide();
                            //上传出错时,处理相关的事情
                        },
                        'UploadComplete': function(up, files) {
                            uploader.splice(0,files.length);
                            $('#loadingToast').hide();
                            //队列文件处理完毕后,处理相关的事情
                        }
                    }
                });
                // domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取
                // uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs
            });
        }

        var BackOrderList = function () {
            var mobile = getUrlParam("m");
            location.href = "./OrderListPage?m=" + mobile;
        }

        var SelfCut=function() {//自主裁剪
            //判断是否上传过照片
            if(uploadnum>0)
            {
                var mobile = getUrlParam("m");
                var oid = getUrlParam("oid");
                location.href = "./PhotoCutPage?m=" + mobile + "&oid=" + oid;
            }
            else
            {
                $('#dialog1').show().on('click', '.weui_btn_dialog', function () {
                    $('#dialog1').off('click').hide();
                });
            }
        }

        var LiuBai=function(){
            var mobile = getUrlParam("m");
            var oid = getUrlParam("oid");
            $.ajax({
                type: "get",
                url: "./LiuBai?m=" + mobile + "&oid=" + oid,
                //async : false,
                //datatype: "json",
                success: function () {
                    location.href="./OrderListPage?m=" + mobile;
                }
            });
        }

        var SellerCut=function(){
            var mobile = getUrlParam("m");
            var oid = getUrlParam("oid");
            $.ajax({
                type: "get",
                url: "./SellerCut?m=" + mobile + "&oid=" + oid,
                //async : false,
                //datatype: "json",
                success: function () {
                    location.href="./OrderListPage?m=" + mobile;
                }
            });
        }
    </script>


}
<div class="bd">
    <div class="navbar">
        <div class="bd" style="height: 100%;">
            <div class="weui_tab">
                <div class="weui_navbar">
                    <div class="weui_navbar_item" onclick="LiuBai();">
                        全部留白
                    </div>
                    <div class="weui_navbar_item" onclick="SelfCut();">
                        自主裁剪
                    </div>
                    <div class="weui_navbar_item" onclick="SellerCut();">
                        卖家裁剪
                    </div>
                </div>
                <div class="weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">
                        <div class="weui_uploader">
                            <div class="weui_uploader_hd weui_cell">
                                <div class="weui_cell_bd weui_cell_primary"><a class="weui_btn weui_btn_primary" href="javascript:" onclick="BackOrderList();" id="showTooltips">返回</a></div>
                                <div class="weui_cell_ft"></div>
                            </div>
                            <div class="weui_uploader_hd weui_cell">
                                @if (Model != null && Model.images != null)
                                {
                                    <div class="weui_cell_bd weui_cell_primary">@Model.name</div>
                                    <div class="weui_cell_ft" id="picIndex">@Model.uploadnum/@Model.num</div>
                                }
                            </div>
                            <div class="weui_uploader_bd" id="weui_uploader_bd">
                                <ul class="weui_uploader_files" id="photoDiv">
                                    @if (Model != null && Model.images != null)
                                    {
                                        foreach (OrderImage orderImg in Model.images)
                                        {
                                        <li class='weui_uploader_file' id='@orderImg.serverid' style='height:@Html.Raw(orderImg.tubH)px;'>
                                            <img style='width: 100%; height: 100%;' src='@orderImg.url' onclick="PreviewImg('@Request.QueryString["m"]','@Request.QueryString["oid"]','@orderImg.serverid');" />
                                        </li>
                                        }
                                    }
                                </ul>

                            </div>
                            @*<input type="button" onclick="ttt('JjoMS1mW9eBQFT8Pw4yNUTE3vRII_LCYiDzv40D8gGQNX0BMyzUHMjsg_7K1yF0M', 'http://7xj84r.com2.z0.glb.qiniucdn.com/09433ff5279f4cb38ac370dab7dd6230.jpg');" value="测试" />*@
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--BEGIN dialog1-->
<div class="weui_dialog_alert" id="dialog1" style="display: none;">
    <div class="weui_mask"></div>
    <div class="weui_dialog">
        <div class="weui_dialog_hd"><strong class="weui_dialog_title">系统提示</strong></div>
        <div class="weui_dialog_bd">请先选择您要上传的照片</div>
        <div class="weui_dialog_ft">
            <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
        </div>
    </div>
</div>
<!--END dialog2-->
<!--BEGIN dialog2-->
<div class="weui_dialog_alert" id="dialog2" style="display: none;">
    <div class="weui_mask"></div>
    <div class="weui_dialog">
        <div class="weui_dialog_hd"><strong class="weui_dialog_title">系统提示</strong></div>
        <div class="weui_dialog_bd">您选择的照片超出了订单照片总数量,请您确认后继续操作</div>
        <div class="weui_dialog_ft">
            <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
        </div>
    </div>
</div>
<!--END dialog2-->

<!--BEGIN loading toast-->
<div id="loadingToast" class="weui_loading_toast" style="display: none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <div class="weui_loading">
            <div class="weui_loading_leaf weui_loading_leaf_0"></div>
            <div class="weui_loading_leaf weui_loading_leaf_1"></div>
            <div class="weui_loading_leaf weui_loading_leaf_2"></div>
            <div class="weui_loading_leaf weui_loading_leaf_3"></div>
            <div class="weui_loading_leaf weui_loading_leaf_4"></div>
            <div class="weui_loading_leaf weui_loading_leaf_5"></div>
            <div class="weui_loading_leaf weui_loading_leaf_6"></div>
            <div class="weui_loading_leaf weui_loading_leaf_7"></div>
            <div class="weui_loading_leaf weui_loading_leaf_8"></div>
            <div class="weui_loading_leaf weui_loading_leaf_9"></div>
            <div class="weui_loading_leaf weui_loading_leaf_10"></div>
            <div class="weui_loading_leaf weui_loading_leaf_11"></div>
        </div>
        <p class="weui_toast_content">上传中...</p>
    </div>
</div>
<!--end toast-->

<script>
    var ttt = function (serverid, url) {
        //localids.push(getRandom(100));

        //var html = "<li class='weui_uploader_file' id='" + serverid + "' style='height:100px'><img style='width:100%;height:100%;' src='" + url + "' /></li>";
        //$("#photoDiv").append(html);
        location.href = "./OrderListPage?m=18667150169";
    }
</script>
